<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="css/cart.css">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <template v-if="allListNum">
            <table>
                    <tr>
                        <th>
                            <input type="checkbox" v-model="checkAll">全选
                        </th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                    <template v-for="(item,index) in list">
                        <tr v-if="item.content.length">
                            <td colspan="5" class="name">{{item.name}}</td>
                        </tr>
                        <tr v-for="(small,smallIndex) in item.content" class="product">
                            <td><input type="checkbox" :checked="small.check" v-on:click="isAll(index,smallIndex)">选中</td>
                            <td>{{small.name}}</td>
                            <td>{{small.price}}</td>
                            <td>
                                <button v-on:click="handleReduce(index,smallIndex)" display="small.count===0">-</button>
                                {{small.count}}
                                <button v-on:click="handleAdd(index,smallIndex)">+</button>
                            </td>
                            <td>
                                <button v-on:click="handleRemove(index,smallIndex)">移除</button>
                            </td>
                        </tr>
                    </template>
                    <tr>
                        <td colspan=5 class="total">总价：￥{{totalPrice}}</td>
                    </tr>
            </table>
        </template>
        <p v-else>
            购物车为空！
        </p>
    </div>
    <script src="js/cart.js"></script>
</body>

</html>